<template>
  <el-form-item prop="name" label="组件ID">
    <el-input v-model="tempVal" @blur="handleBlur" type="text"></el-input>
  </el-form-item>
</template>

<script>
import { isEmptyStr } from '@/utils/util'

export default {
  name: 'NameEditor',
  inject: ['getDesignerConfig'],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object
  },
  data() {
    return {
      tempVal: null,
      tempWidget: null
    }
  },
  computed: {},
  watch: {
    "optionModel.name": {
      handler(newVal, oldVal) {
          if(this.tempWidget == null || this.tempWidget != this.selectedWidget) { //变化组件
            this.tempWidget = this.selectedWidget
            this.tempVal = this.optionModel.name
            // console.log('变化组件')
          }
          

          // console.log(this.selectedWidget)
          // console.log(`新的值: ${newVal}`);
          // console.log(`旧的值: ${oldVal}`);
          // console.log("hellow  world");
      },
      immediate: true
    }

  },
  mounted() {
    // console.log(123)
  },
  methods: {
    //失去焦点
    handleBlur() {
      console.log('Input field lost focus')
      console.log(this.optionModel.name)
      let wList = this.designer.widgetList
      if (this.tempVal == '') {
        this.tempVal = this.optionModel.name
        return
      }
      console.log(wList)
      for (let i =0; i< wList.length; i++) {
        let na = wList[i].options.name
        console.log("22->", na, this.tempVal)
        if (na == this.tempVal) {
          this.tempVal = this.optionModel.name
          return
        }
      }

      this.optionModel.name = this.tempVal
    }
  }
}
</script>

<style lang="scss" scoped></style>
